<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <title>新世界</title>
</head>
<body>
    <div class="courseSelect">
        <button type="button" class="dropdownText">测试AAA</button>
        <button type="button" class="dropdownBtn"></button>
        <ul class="dropdown-menu">
          <li data-value="">测试AAA</li>
          <li data-value="">测试BBB</li>
          <li data-value="">测试CCC</li>
          <li data-value="">测试DDD</li>
        </ul>
    </div>
    
    <script src="./js/jquery.min.js"></script>
    <script>
           $(".courseSelect").on("click",function(){
                if($(".dropdown-menu").css("display")=="none"){
                    $(".dropdown-menu").css("display","block");  
                }else{
                    $(".dropdown-menu").css("display","none");   
                }
                });
                $(".courseSelect").on("click", "ul.dropdown-menu>li", function(){
                var coursename = $(this).text();
                $(this).closest(".courseSelect").find("button.dropdownText").text(coursename);
                $(".dropdown-menu").css("display","none");
                })  

                $(document).bind("click",function(e){
                if( $(e.target).closest(".courseSelect .dropdownText").length == 0    &&$(e.target).closest(".courseSelect .dropdownBtn").length == 0){
                    $(".dropdown-menu").css("display","none");
                }
            });
    </script>
</body>
</html>